<!--The content below is only a placeholder and can be replaced.-->
<mat-card>
  <mat-toolbar color="primary">
    material-todo
    <button mat-fab class="fab-add" (click)="openTodoDialog()">
      <mat-icon>add</mat-icon>
    </button>
  </mat-toolbar>

  <mat-card-content *ngIf="todoList.length">
    <mat-list>
      <form>
        <mat-list-item *ngFor="let todo of todoList; let index=index" class="list-item">
          <mat-checkbox color="primary" [name]="'item'+index" [(ngModel)]="todo.completed">
            <span [class.completed]="todo.completed">{{todo.title}}</span>
          </mat-checkbox>
          <span>
            <button mat-mini-fab (click)="openDeleteConfirmationDialog(todo, index)" color="primary">
              <mat-icon>delete_forever</mat-icon>
            </button>
            <button mat-mini-fab (click)="openTodoDialog(todo)" color="primary" [disabled]="todo.completed">
              <mat-icon>mode_edit</mat-icon>
            </button>
          </span>
        </mat-list-item>
      </form>
    </mat-list>
  </mat-card-content>
</mat-card>
<app-dialog #a [title]="okButtonText"
            [template]="'Enter Task:'"
            [placeholder]="'Enter text here'"
            [okText]="okButtonText"
            [value]="fieldValue"
            (valueEmitted)="updateTodo($event)"
            [showPrompt]="showDialog">
</app-dialog>

<app-dialog #b [title]="'Delete Confirmation'"
            [template]="'Are you sure to delete this task?'"
            [placeholder]="'Enter text here'"
            [okText]="'Yes'"
            [cancelText]="'No'"
            [value]="''"
            [valueReadonly]="true"
            (valueEmitted)="remove($event)"
            [showPrompt]="showDeleteConfirmation">
</app-dialog>

